<template>
	<div class="lc_wrap">
		<el-row class="trendanalysis">
			<el-col :span="leftWidth">
				<div class="box treeBox">
					<basic-container>
						<lcCheckBoxTree @ready="ready" isAll="0"></lcCheckBoxTree>
					</basic-container>
				</div>
			</el-col>
			<el-col :span="rightWidth" class="table-wrapper" style="position: relative">
				<overlay @changeTreeBox="changeTreeBox"></overlay>
				<basic-container>
					<div class="search-tools">
						<div class="search-left">
							<!-- 时 -->
							<div v-if="dateType==1">
								<el-date-picker v-model="dateTime" type="date" size="small" value-format="yyyy-MM-dd" :picker-options="pickerOption" placeholder="选择日期" :clearable='false'></el-date-picker>
								<el-time-select v-model="hourTime" size="small" placeholder="选择时间" :picker-options="{
                                    start: '00:00',
                                    step: '01:00',
                                    end: '23:00'
                                }" :clearable="false" style="margin-left:10px"></el-time-select>
							</div>
							<!-- 日 -->
							<div v-if="dateType==2">
								<el-date-picker v-model="dateTime" type="date" size="small" value-format="yyyy-MM-dd" :picker-options="pickerOption" placeholder="选择日期" :clearable='false'></el-date-picker>
							</div>
							<!-- 周 -->
							<div v-if="dateType==3">
								<el-date-picker v-model="dateTime" type="week" size="small" format="yyyy 第 WW 周" value-format="yyyy-MM-dd" :picker-options="pickerOption" placeholder="选择周" :clearable='false'></el-date-picker>
							</div>
							<!-- 月 -->
							<div v-if="dateType==4">
								<el-date-picker v-model="dateTime" type="month" size="small" value-format="yyyy-MM" :picker-options="pickerOption" placeholder="选择月份" :clearable='false'></el-date-picker>
							</div>
							<!-- 年 -->
							<div v-if="dateType==5">
								<el-date-picker v-model="dateTime" type="year" size="small" value-format="yyyy" :picker-options="pickerOption" placeholder="选择年份" :clearable='false'></el-date-picker>
							</div>
							<div style="margin-left:20px;">
								<el-select size="small" v-model="gene">
									<el-option v-for="(item, index) in geneList" :key="index" :label="item.alias" :value="item.factorCode">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="search-right">
							<div class="search-tabs">
								<el-radio v-model="dateType" v-for="(item, index) in dateTypeList" :key="index" :label="item.id" :disabled="item.disable">{{ item.value }}
								</el-radio>
							</div>
							<div class="searcg-btns">
								<el-button type="primary" size="small" icon="el-icon-search" @click="search">搜 索</el-button>
							</div>
						</div>
					</div>
					<!--          <div v-if="isEmpty" class="empty">暂无数据</div>-->
					<noData v-if="isEmpty"></noData>
					<e-chart v-else autoresize :options="chartOptions" style="height:92%;"></e-chart>
				</basic-container>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { getDeptTree, getTypes, getLine, getFactorList } from "@/api/dust/trendanalysis";
	import { mapGetters } from "vuex";
	import { dateFormat } from "@/util/date";
	import lcCheckBoxTree from "@/components/common/tree_checkBox.vue";
	import noData from "@/components/common/noData";
	import overlay from "@/components/common/overlay.vue";
	export default {
		components: {
			lcCheckBoxTree,
			noData,
			overlay
		},
		data() {
			let _this = this
			return {
				isEmpty: true,
				chartOptions: {},
				leftWidth: this.$leftWidth,
				rightWidth: this.$rightWidth,
				data: [],
				deptInfoName: '',
				deptInfoId: '',
				dateType: '', // 日期格式：日、月、年
				// dateTime: dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss'),
				dateTime: dateFormat(new Date(), 'yyyy-MM-dd'), // 默认显示的日期
				dateTime2: '',
				hourTime: '00:00',
				dateTypeList: [],
				pickerOption: {
					firstDayOfWeek: 1,
					disabledDate(time) {
						return _this.dateType == 3 ? false : time.getTime() > Date.now()
					},
				},
				nodeList: [], // 存放已勾选节点value的数组（底层节点
				geneList: [],
				gene: '',
				unit: '',
				t2: null,
				interval: 59
			};
		},
		computed: {
			...mapGetters(["permission"]),
		},
		mounted() {

		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			},
			dateType() {
				this.dateTime = dateFormat(new Date(), 'yyyy-MM-dd') // 默认显示的日期
			},
		},
		methods: {
			getDateTime2() {
				let myDate = null
				switch(this.dateType) {
					case 1: // 时
						myDate = this.dateTime.slice(0, 10) + ' ' + this.hourTime.slice(0, 2)
						break;
					case 2: // 日
						myDate = this.dateTime.slice(0, 10)
						this.interval = 59
						break;
					case 3: // 周
						myDate = this.dateTime.slice(0, 10)
						break;
					case 4: // 月
						myDate = this.dateTime.slice(0, 7)
						this.interval = 0
						break;
					case 5: // 年
						myDate = this.dateTime.slice(0, 4)
						this.interval = 0
						break;
					default:
						myDate = this.dateTime
						break;
				}
				this.dateTime2 = myDate;
			},
			onLoad() {
				this.getDateTime2()
				getTypes().then(res => {
					this.dateTypeList = res.data.data;
					this.dateType = this.dateTypeList[0].id;
					this.getFactorList()
				})

			},
			ready(val) {
				this.nodeList = val
				let that = this
				clearTimeout(this.t2)
				this.t2 = null
				clearTimeout(this.timer)
				this.timer = null
				// 设置定时器，100ms后再请求数据（100ms内没有被再次勾选的话）
				this.t2 = setTimeout(() => {
					that.onLoad()
				}, 100)
			},
			getFactorList() {
				if(this.nodeList.length == 0) {
					this.isEmpty = true //如果没有选中 则暂无数据
					this.chartOptions = {}
					return
				}
				getFactorList(this.nodeList.join(',')).then(res => {
					this.geneList = res.data.data;
					this.gene = this.geneList[0].factorCode;
					this.unit = this.geneList[0].unit
				}).then(() => {
					this.getLine()
				})
			},

			changeTreeBox() {
				this.leftWidth = this.leftWidth == this.$leftWidth ? 0 : this.$leftWidth
				this.rightWidth = this.rightWidth == this.$rightWidth ? 24 : this.$rightWidth
			},
			// 搜索
			search() {
				for(var i = 0; i < this.geneList.length; i++) {
					if(this.gene == this.geneList[i].factorCode) {
						this.unit = this.geneList[i].unit
						break;
					}
				}
				this.getDateTime2()
				this.getLine()
				// this.onLoad()
			},
			getLine() {
				getLine(this.gene, this.dateTime2, this.nodeList.join(','), this.dateType).then(res => {
					let isArrs = [] //定义一个空数组
					let isFlag = null //定义一个变量
					res.data.data.forEach(item => {
						let isArr = this._ifFlag(item.yarray) //判断每个站点yarray数组里面的值是否都为0 取反 全部为0 false 反之 true
						isArrs.push(isArr) //选中所有站点
					})
					isFlag = this._isHas(isArrs) //选中所有站点  如果里面有任何一个是ture 则显示报表 否则 暂无数据
					this.isEmpty = isFlag == true ? false : true //暂无数据隐藏 isflag false 则isEmpty true
					if(isFlag) { ////选中所有站点  如果里面有任何一个是ture
						this.chartOptions = {
							tooltip: {
								trigger: 'axis',
								axisPointer: { // 坐标轴指示器，坐标轴触发有效
									type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
								},
							},
							// color: '#1148ff',
							legend: {
								// data: ['站点1', '站点2', '站点3', '站点4']
							},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: [{
								type: 'category',
								data: [],
								axisLabel: {
									interval: this.interval, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
									color: '#ccc'
								},
								axisLine: {
									lineStyle: {
										color: '#505b83'
									} // x轴坐标轴颜色
								},
								axisTick: false
							}],
							yAxis: {
								type: 'value',
								axisLabel: {
									formatter: '{value} ' + this.unit,
									color: '#333',
								},
								axisLine: {
									lineStyle: {
										color: '#505b83'
									} // x轴坐标轴颜色
								},
								axisTick: false,
								splitLine: {
									show: true,
									lineStyle: {
										color: '#374062',
										type: 'dashed' //设置背景为虚线
									}
								}
							},
							series: []
						}
						this.chartOptions.xAxis[0].data = res.data.data[0].xarray; //x轴数据
						res.data.data.map((item, ind) => {
							this.chartOptions.series.push({
								data: item.yarray,
								type: 'line',
								smooth: 0.5,
								name: item.siteName
							})
						})
					}
				})
			},
			_isHas(arr) {
				return arr.includes(true)
			},
			_ifFlag(arr) {
				return !arr.every(i => i === '') //判断数组里面的值都为0
			}
		}
	};
</script>

<style lang="scss" scoped>
	.empty {
		position: absolute;
		left: 0;
		top: 20%;
		color: #ccc;
		right: 0;
		bottom: 20%;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #909399;
	}
	
	.map {
		width: 100%;
		height: 500px;
	}
	
	.box {
		height: 100%;
		margin-bottom: 0;
	}
	
	.search-left {
		display: flex;
		height: 33px;
		line-height: 33px;
	}
	
	.el-row {
		height: calc(100% - 20px);
	}
	
	.el-col {
		height: 100%;
		overflow: auto;
	}
	
	.search-tools {
		height: 49px;
		display: flex;
		justify-content: space-between;
		padding: 0 8px;
	}
	
	.search-right {
		display: flex;
	}
	
	.search-tabs {
		height: 33px;
		display: flex;
		align-items: center;
		margin-right: 40px;
	}
	
	.overlay {
		position: absolute;
		width: 200px;
		height: calc(100% - 35px);
		opacity: 0;
		display: flex;
		align-items: center;
		padding-left: 6px;
		.tree-tool {
			height: 34px;
			width: 18px;
			background: #fff;
			box-shadow: 2px 1px 4px #ccc;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			cursor: pointer;
			display: flex;
			padding: 6px 0;
			z-index: 9999;
			.tool-line {
				margin-left: 3px;
				height: 100%;
				border-left: 1px solid #ddd;
			}
		}
	}
	
	.overlay:hover {
		opacity: 1;
	}
</style>